<template>
    <div style="padding:20px">

        <!-- 搜索区 -->
        <div style="margin:10px 0">
            <el-select v-model="searchValue" @change="handleChange" class="m-2" placeholder="搜索类型" size="small"
                style="width:100px;margin-right: 10px;">
                <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-input placeholder="默认搜索住户姓名" v-model="search" clearable
                style="width:200px;margin-right: 10px;"></el-input>
            <el-button type="primary" @click="load">搜索</el-button>
        </div>
        <!-- 分页 -->
        <div style="margin:10px 0">
            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize"
                :page-sizes="[50, 100, 200, 300]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
        <!-- 列表 -->
        <el-table :data="tableData" border style="width: 100%" height="60vh" v-loading="loading" stripe>
            <el-table-column prop="id" label="订单ID" width="80" sortable />
            <el-table-column label="预定状态" width="70">
                <template #default="scope">
                    <el-button v-if="(scope.row.state === '入住')" type="success" plain
                        style="cursor:default">入住</el-button>
                    <el-button v-else-if="(scope.row.state === '预订' || scope.row.state === '预定')" type="primary" plain
                        style="cursor:default">预订</el-button>
                    <el-button v-else type="danger" plain style="cursor:default">取消</el-button>
                </template>
            </el-table-column>

            <el-table-column prop="username" label="用户姓名" />
            <el-table-column prop="idCard" label="身份证号" />
            <el-table-column prop="phone" label="手机号" show-overflow-tooltip />

            <el-table-column prop="amount" label="入住人数" />
            <el-table-column prop="roomId" label="房间ID" />
            <el-table-column prop="roomCode" label="房间号" />
            <el-table-column prop="startDate" label="开始日期" />
            <el-table-column prop="endDate" label="结束日期" />
            <el-table-column prop="days" label="天数(晚)" />
            <el-table-column prop="total" label="金额" />
            <el-table-column label="支付状态" width="75">
                <template #default="scope">
                    <span v-if="(scope.row.payState == 1)">
                        <el-button type="success" text bg style="cursor:default">已支付</el-button>
                    </span>
                    <span v-if="(scope.row.payState == 0)">
                        <el-button type="danger" text bg
                            @click="((dialogVisible2 = true), payOrderId = scope.row.id)">未支付</el-button>
                    </span>
                </template>
            </el-table-column>

            <el-table-column prop="userInfo" label="多住户信息" width="100" show-overflow-tooltip />
            <el-table-column prop="userRemark" label="用户备注" width="100" show-overflow-tooltip />


            <el-table-column prop="createTime" label="创建日期" />
            <el-table-column prop="updateTime" label="最后修改日期" />

            <el-table-column prop="remark" show-overflow-tooltip label="备注" />


            <el-table-column fixed="right" label="Operations" width="210">
                <template #default="scope">
                    <el-popconfirm title="确定退房吗？" @confirm="checkout(scope.row)" @cancel="handleCancel()">
                        <template #reference>
                            <el-button type="danger" size="small">退房</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button type="primary" size="small" @click="(handleSubscribe(scope.row), dialogVisible = true)">
                        编辑</el-button>
                    <el-button type="success" size="small" @click="(dialogVisible3 = true, checkPlus(scope.row),plusTotal='')">
                        续住</el-button>

                </template>
            </el-table-column>
        </el-table>


        <!--    弹窗提醒-->
        <el-dialog v-model="dialogVisible" title="修改信息" width="30%">

            <el-form :model="form" label-width="120px">

                <!-- 从按钮事件中获取 -->
                <el-form-item label="民宿ID">
                    <el-input v-model="form.roomId" disabled style="width: 80%" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="房间号">
                    <el-input v-model="form.roomCode" style="width: 80%" disabled></el-input>
                </el-form-item>
                <!-- <el-form-item label="预定状态">
                    <el-input v-model="form.state" style="width: 80%" disabled></el-input>
                </el-form-item> -->
                <el-form-item label="支付状态">
                    <el-radio-group v-model="form.payState">
                        <el-radio :label=0>未支付</el-radio>
                        <el-radio :label=1>已支付</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- 以下需要自行填写 -->
                <el-form-item label="入住人姓名">
                    <el-input v-model="form.username" style="width: 80%" maxlength="16"></el-input>
                </el-form-item>
                <el-form-item label="入住人身份证号">
                    <el-input v-model="form.idCard" style="width: 80%" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="入住人手机号">
                    <el-input v-model="form.phone" style="width: 80%" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="入住日期">
                    <el-input v-model="form.startDate" style="width: 80%" maxlength="20" disabled></el-input>
                    <!-- <el-date-picker v-model="form.startDate" type="date" placeholder="Pick a day" size="small" /> -->
                </el-form-item>
                <el-form-item label="离开日期">
                    <el-input v-model="form.endDate" style="width: 80%" maxlength="20" disabled></el-input>
                </el-form-item>
                <el-form-item label="入住天数(晚)">
                    <el-input type="number" v-model="form.days" style="width: 80%" maxlength="20" disabled></el-input>
                </el-form-item>
                <el-form-item label="入住人数">
                    <el-input v-model="form.amount" style="width: 80%" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="信息">
                    <el-input type="textarea" v-model="form.userInfo" style="width: 80%"
                        placeholder="多人入住请在此备注其余人身份信息！"></el-input>
                </el-form-item>
                <el-form-item label="用户前台备注">
                    <el-input type="textarea" v-model="form.userRemark" style="width: 80%"
                        placeholder="用户添加的备注"></el-input>
                </el-form-item>
                <el-form-item label="后台备注">
                    <el-input type="textarea" v-model="form.remark" style="width: 80%"
                        placeholder="用户看不到的备注"></el-input>
                </el-form-item>
                <el-form-item label="总价格">
                    <el-input v-model="form.total" style="width: 80%"></el-input>
                </el-form-item>
            </el-form>
            <template #footer="target">
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="orderUpdateHandle(), dialogVisible = false">确认</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 支付弹窗 -->
        <el-dialog v-model="dialogVisible2" title="扫码支付" width="30%">
            <el-image src="http://localhost:8091/files/9c775d9e196e40b8968ca5ddbd5d3baa"></el-image>
            <template #footer="target">
                <span class="dialog-footer">
                    <el-button @click="((dialogVisible2 = false), handleCancel())">暂不支付</el-button>
                    <el-button type="primary"
                        @click="dialogVisible2 = false, form.payState = 1, payHandle()">支付成功</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 续住弹窗 -->
        <el-dialog v-model="dialogVisible3" title="续住" width="30%">
            <el-form-item label="增加天数(晚)">
                <el-input type="number" v-model="plusDays" style="width: 80%" maxlength="20" @blur="plusDaysBlur()"></el-input>
            </el-form-item>
            <el-form-item label="单价">
                <el-input type="number" v-model="plusPrice" style="width: 80%" maxlength="20" @blur="plusDaysBlur()" disabled></el-input>
            </el-form-item>
            <el-form-item label="总金额">
                <el-input type="number" v-model="plusTotal" style="width: 80%" maxlength="20" @blur="plusDaysBlur()" disabled></el-input>
            </el-form-item>
            <template #footer="target">
                <span class="dialog-footer">
                    <el-button @click="((dialogVisible3 = false), handleCancel())">取消</el-button>
                    <el-button type="primary"
                        @click="dialogVisible3 = false, checkPlusHandle()">确认续住</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
          
<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue';
import request from '@/utils/request';
import { ElMessage } from 'element-plus'


export default defineComponent({
    name: 'HOrderCheckOutView',
    components: {

    },
    setup() {
        //加载动画
        const loading = ref(true)
        //表中数据
        const tableData = ref([])
        // 分页
        const currentPage = ref(1)
        const pageSize = ref(50)
        const total = ref(0)
        const small = ref(false)
        const background = ref(false)
        const disabled = ref(false)
        const handleSizeChange = (val: number) => { //改变每页数量
            console.log(`${val} items per page`)
            load()
        }
        const handleCurrentChange = (val: number) => { //改变当前页码位置
            console.log(`current page: ${val}`)
            load()
        }
        // 弹窗控制和数据
        const dialogVisible = ref(false)
        const dialogVisible2 = ref(false)
        const dialogVisible3 = ref(false)
        const form: any = ref({})

        // table数据初始化
        const search = ref()
        const searchType = ref()
        const load = () => {
            request.get('/h/order/getCheckPage',{
                params: {
                    pageNum: currentPage.value,
                    pageSize: pageSize.value,
                    search: search.value,
                    searchType: searchType.value
                }
            }).then(res => {
                // console.log(res.data)
                tableData.value = res.data.records
                total.value = res.data.total
                loading.value = false
            })
        }

        onMounted(() => {
            load()
        })


        // 搜索区域
        const searchValue = ref('')
        const searchOptions = [
            {
                value: 'username',
                label: '姓名',
            },
            {
                value: 'idCard',
                label: '身份证',
            },
            {
                value: 'phone',
                label: '电话号',
            },
            {
                value: 'roomId',
                label: '房间ID',
            },
            {
                value: 'roomCode',
                label: '房间号',
            }
        ]
        // 搜索类型
        const handleChange = (value: any) => {
            // console.log(value)
            searchType.value = value
        }
        // handleSubscribe 预订操作
        const handleSubscribe = (row: any) => {
            form.value = {}
            //跟表中数据隔离开，深拷贝，独立对象，避免点击取消数据丢失
            form.value = JSON.parse(JSON.stringify(row))

            dialogVisible.value = true
        }
        // 支付处理
        const payOrderId = ref()
        const payHandle = () => {
            request.post('/h/order/pay', payOrderId.value).then((res: any) => {
                if (res.code === '200') {
                    ElMessage.success('支付成功')
                    load()
                } else {
                    ElMessage.error('支付失败')
                }
            })
        }

        const handleCancel = () => {
            ElMessage.error('取消操作')
        }

        // 控制编辑or入住操作:false为修改操作，true为入住操作
        const orderUpdateHandle = () => {

            request.put('/h/order/', form.value).then((res: any) => {
                if (res.code === '0' || res.code === '200') {
                    ElMessage.success('更新成功')
                } else {
                    ElMessage.error('更新失败')
                }
                load()
            }).catch(err => {
                // console.log(err)
                ElMessage.error('更新失败')
            })
        }
        // 续住处理
        const plusOrder = ref()
        const plusDays =ref(1)
        const plusPrice =ref()
        const plusTotal =ref()
        const checkPlus = (row:any) =>{
            plusOrder.value = row
            request.get('/h/room/getById', {
                params:{
                    roomId:row.roomId,
                }
            }).then((res: any) => {
                if (res.code === '200') {
                    plusPrice.value = res.data.price
                } else {
                    ElMessage.error('未获取到对应房间信息')
                }
            })
        }
        const plusDaysBlur = () => {
            plusTotal.value = plusDays.value * plusPrice.value
        }
        const checkPlusHandle = () => {
            request.post('/h/order/plus', null,{
                params:{
                    orderId:plusOrder.value.id,
                    days:plusDays.value
                }
            }).then((res: any) => {
                if (res.code === '200') {
                    ElMessage.success('续住成功，请支付')
                    load()
                } else {
                    ElMessage.error('续住失败')
                }
            })

        }
        // 退房操作
        const checkout = (row:any) =>{
            request.post('/h/order/checkout', row).then((res: any) => {
                if (res.code === '200') {
                    ElMessage.success('退房成功')
                    load()
                } else {
                    ElMessage.error(res.msg)
                }
            })
        }
        return {
            loading,
            tableData,
            search,
            currentPage,
            pageSize,
            total,
            small,
            background,
            disabled,
            handleSizeChange,
            handleCurrentChange,
            dialogVisible,
            dialogVisible2,
            dialogVisible3,
            form,
            load,
            searchValue,
            searchOptions,
            handleChange,
            handleSubscribe,
            payHandle,
            handleCancel,
            orderUpdateHandle,
            payOrderId,
            plusDays,
            plusPrice,
            checkPlus,
            checkPlusHandle,
            plusTotal,
            plusDaysBlur,
            checkout
        }
    },
});
</script>
  
          